<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蔬记 - 蔬菜档案库</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/plants.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="top-nav-bar">
        <button class="back-btn" onclick="goBack()">
            <span class="back-icon">←</span>
        </button>
        <h1 class="nav-title">蔬菜档案库</h1>
        <div class="nav-spacer"></div>
    </div>

    <!-- 页面容器 -->
    <div class="page-container">
        <!-- 2. 植物档案（完善版，含分类切换） -->
        <div class="page active" id="plants-page">
            
            <!-- 搜索框 -->
            <div class="search-section">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索蔬菜名称..." id="searchInput">
                    <span class="search-icon">🔍</span>
                </div>
            </div>
            
            <!-- 分类标签 -->
            <div class="category-tabs">
                <div class="category-tab active" data-category="all">全部</div>
                <div class="category-tab" data-category="leaf">叶菜类</div>
                <div class="category-tab" data-category="fruit">果菜类</div>
                <div class="category-tab" data-category="root">根茎类</div>
                <div class="category-tab" data-category="flower">花菜类</div>
                <div class="category-tab" data-category="mushroom">菌类及其他</div>
            </div>
            
            <!-- 蔬菜列表（含分类属性，通过JS筛选） -->
            <div class="plant-list">
                <!-- 叶菜类（leaf） -->
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">生菜</div>
                        <div style="font-size:12px; color:#666;">生长期 30-45天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">白菜</div>
                        <div style="font-size:12px; color:#666;">生长期 50-60天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">菠菜</div>
                        <div style="font-size:12px; color:#666;">生长期 30-40天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">芹菜</div>
                        <div style="font-size:12px; color:#666;">生长期 80-120天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">油菜</div>
                        <div style="font-size:12px; color:#666;">生长期 30-40天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">空心菜</div>
                        <div style="font-size:12px; color:#666;">生长期 35-45天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">芥蓝</div>
                        <div style="font-size:12px; color:#666;">生长期 50-60天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="leaf">
                    <div class="plant-img">🥬</div>
                    <div class="plant-card-info">
                        <div class="plant-name">菜心</div>
                        <div style="font-size:12px; color:#666;">生长期 40-50天</div>
                    </div>
                </div>
                
                <!-- 果菜类（fruit） -->
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🍅</div>
                    <div class="plant-card-info">
                        <div class="plant-name">番茄</div>
                        <div style="font-size:12px; color:#666;">生长期 60-90天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🍆</div>
                    <div class="plant-card-info">
                        <div class="plant-name">茄子</div>
                        <div style="font-size:12px; color:#666;">生长期 100-120天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🌶️</div>
                    <div class="plant-card-info">
                        <div class="plant-name">辣椒</div>
                        <div style="font-size:12px; color:#666;">生长期 90-120天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🥒</div>
                    <div class="plant-card-info">
                        <div class="plant-name">黄瓜</div>
                        <div style="font-size:12px; color:#666;">生长期 50-70天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🍉</div>
                    <div class="plant-card-info">
                        <div class="plant-name">西瓜</div>
                        <div style="font-size:12px; color:#666;">生长期 80-100天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="fruit">
                    <div class="plant-img">🍈</div>
                    <div class="plant-card-info">
                        <div class="plant-name">甜瓜</div>
                        <div style="font-size:12px; color:#666;">生长期 70-90天</div>
                    </div>
                </div>
                
                <!-- 根茎类（root） -->
                <div class="plant-card" data-category="root">
                    <div class="plant-img">🥕</div>
                    <div class="plant-card-info">
                        <div class="plant-name">胡萝卜</div>
                        <div style="font-size:12px; color:#666;">生长期 70-100天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="root">
                    <div class="plant-img">🥔</div>
                    <div class="plant-card-info">
                        <div class="plant-name">土豆</div>
                        <div style="font-size:12px; color:#666;">生长期 90-120天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="root">
                    <div class="plant-img">🧄</div>
                    <div class="plant-card-info">
                        <div class="plant-name">大蒜</div>
                        <div style="font-size:12px; color:#666;">生长期 120-150天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="root">
                    <div class="plant-img">🧅</div>
                    <div class="plant-card-info">
                        <div class="plant-name">洋葱</div>
                        <div style="font-size:12px; color:#666;">生长期 100-150天</div>
                    </div>
                </div>
                
                <!-- 花菜类（flower） -->
                <div class="plant-card" data-category="flower">
                    <div class="plant-img">🥦</div>
                    <div class="plant-card-info">
                        <div class="plant-name">西兰花</div>
                        <div style="font-size:12px; color:#666;">生长期 80-100天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="flower">
                    <div class="plant-img">🥦</div>
                    <div class="plant-card-info">
                        <div class="plant-name">花椰菜</div>
                        <div style="font-size:12px; color:#666;">生长期 90-120天</div>
                    </div>
                </div>
                
                <!-- 菌类及其他 -->
                <div class="plant-card" data-category="mushroom">
                    <div class="plant-img">🍄</div>
                    <div class="plant-card-info">
                        <div class="plant-name">香菇</div>
                        <div style="font-size:12px; color:#666;">生长期 30-45天</div>
                    </div>
                </div>
                <div class="plant-card" data-category="mushroom">
                    <div class="plant-img">🍄</div>
                    <div class="plant-card-info">
                        <div class="plant-name">平菇</div>
                        <div style="font-size:12px; color:#666;">生长期 20-30天</div>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <script>
        // 返回功能
        function goBack() {
            window.history.back();
        }

        // 蔬菜库搜索功能
        const searchInput = document.querySelector('.search-input');
        const plantCards = document.querySelectorAll('.plant-card');
        
        searchInput.addEventListener('input', () => {
            const searchTerm = searchInput.value.toLowerCase();
            plantCards.forEach(card => {
                const plantName = card.querySelector('.plant-name').textContent.toLowerCase();
                if (plantName.includes(searchTerm)) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 分类标签功能 - 完善版
        const categoryTags = document.querySelectorAll('.category-tab');
        
        // 初始化分类切换功能
        function initCategoryFilter() {
            categoryTags.forEach(tag => {
                tag.addEventListener('click', () => {
                    // 移除所有标签的active类
                    categoryTags.forEach(t => t.classList.remove('active'));
                    // 添加当前标签的active类
                    tag.classList.add('active');
                    
                    // 获取选中的分类
                    const category = tag.getAttribute('data-category');
                    
                    // 根据分类筛选蔬菜卡片
                    plantCards.forEach(card => {
                        if (category === 'all' || card.getAttribute('data-category') === category) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    });
                });
            });
        }
        
        // 初始化分类筛选功能
        initCategoryFilter();
        
        // 蔬菜详情模态框功能
        
        // 在plantData对象定义之后，showModal函数之前添加modal变量的初始化
        // 完善蔬菜数据映射
        const plantData = {
            // 这里是植物数据，保持不变
            '生菜': {
                icon: '🥬',
                growthPeriod: '30-45天',
                category: '叶菜类',
                description: '生菜是一种常见的绿叶蔬菜，口感脆嫩，营养丰富。适合在凉爽的环境中生长，对光照要求不高，适合家庭种植。',
                care: '保持土壤湿润，避免阳光直射，生长温度以15-20℃最佳，定期施肥促进生长。'
            },
            '白菜': {
                icon: '🥬',
                growthPeriod: '50-60天',
                category: '叶菜类',
                description: '白菜是一种常见的蔬菜，富含维生素和矿物质。生长速度快，适应性强，适合家庭种植。',
                care: '需要充足的阳光和水分，生长温度以10-22℃最佳，注意防治病虫害。'
            },
            '菠菜': {
                icon: '🥬',
                growthPeriod: '30-40天',
                category: '叶菜类',
                description: '菠菜是一种营养丰富的绿叶蔬菜，富含铁元素。生长周期短，适合在春秋季种植。',
                care: '喜欢凉爽湿润的环境，避免高温，保持土壤湿润，生长温度以15-20℃最佳。'
            },
            '番茄': {
                icon: '🍅',
                growthPeriod: '60-90天',
                category: '果菜类',
                description: '番茄是一种常见的果菜类蔬菜，富含维生素C和番茄红素。适合在温暖的环境中生长。',
                care: '需要充足的阳光和水分，生长温度以20-28℃最佳，结果期需要支架支撑，定期整枝打杈。'
            },
            '茄子': {
                icon: '🍆',
                growthPeriod: '100-120天',
                category: '果菜类',
                description: '茄子是一种常见的果菜类蔬菜，富含多种营养成分。适合在温暖的环境中生长。',
                care: '需要充足的阳光和水分，生长温度以20-30℃最佳，结果期需要支架支撑，注意防治病虫害。'
            },
            '胡萝卜': {
                icon: '🥕',
                growthPeriod: '70-100天',
                category: '根茎类',
                description: '胡萝卜是一种常见的根茎类蔬菜，富含胡萝卜素。生长周期较长，适合在凉爽的环境中生长。',
                care: '需要疏松肥沃的土壤，保持土壤湿润，生长温度以15-20℃最佳，定期除草。'
            },
            '土豆': {
                icon: '🥔',
                growthPeriod: '90-120天',
                category: '根茎类',
                description: '土豆是一种常见的根茎类蔬菜，富含淀粉。生长周期较长，适合在凉爽的环境中生长。',
                care: '需要疏松肥沃的土壤，保持土壤湿润，生长温度以15-25℃最佳，注意防治病虫害。'
            },
            '西兰花': {
                icon: '🥦',
                growthPeriod: '80-100天',
                category: '花菜类',
                description: '西兰花是一种常见的花菜类蔬菜，富含维生素C和膳食纤维。生长周期较长，适合在凉爽的环境中生长。',
                care: '需要充足的阳光和水分，生长温度以15-20℃最佳，定期施肥促进生长。'
            },
            '香菇': {
                icon: '🍄',
                growthPeriod: '30-45天',
                category: '菌类及其他',
                description: '香菇是一种常见的食用菌，富含多种营养成分。生长周期较短，适合在阴凉潮湿的环境中生长。',
                care: '需要保持适宜的温度和湿度，生长温度以15-25℃最佳，注意通风换气。'
            }
        };
        
        
        // 为所有蔬菜卡片添加点击事件
        plantCards.forEach(card => {
            card.addEventListener('click', () => {
                const plantName = card.querySelector('.plant-name').textContent;
                // 直接跳转到种植页面
                const plantInfo = plantData[plantName];
                if (plantInfo) {
                    const selectedPlant = {
                        name: plantName,
                        icon: plantInfo.icon,
                        variety: '普通', // 默认品种
                        plantedDate: new Date().toISOString(),
                        harvested: false,
                        growthPeriod: plantInfo.growthPeriod
                    };
                    
                    // 从localStorage获取已种植的蔬菜数据
                    const plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
                    
                    // 添加新种植的蔬菜
                    plantedPlants.push(selectedPlant);
                    
                    // 保存到localStorage
                    localStorage.setItem('plantedPlants', JSON.stringify(plantedPlants));
                    
                    // 跳转到首页
                    window.location.href = 'index.html';
                }
            });
        });
    </script>
</body>
</html>